<link rel="import" href="../../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../../bower_components/vaadin-grid/src/vaadin-grid.html">

<link rel="import" href="../../../components/search-bar.html">
<link rel="import" href="../../../components/utils-mixin.html">

<link rel="import" href="../../../../styles/shared-styles.html">

<dom-module id="users-view">
  <template>
    <style include="shared-styles">
      :host {
        display: flex;
        flex-direction: column;
        height: 100vh;
      }
    </style>

    <search-bar id="search"></search-bar>

    <vaadin-grid id=grid theme="crud"></vaadin-grid>

  </template>

  <script>
    class UsersView extends Polymer.Element {
      static get is() {
        return 'users-view';
      }

      ready() {
        super.ready();

        // This method is overridden to measure the page load performance and can be safely removed
        // if there is no need for that
        const grid = this.$.grid;
        let partsLoaded = 0;
        const listener = () => {
          if (++partsLoaded === 2 && window.performance.mark) {
            // the 'loading-changed' event is fired separately for the headers (first)
            // and for the content (second). Waiting for the second time
            window.performance.mark('bakery-page-loaded');
            grid.removeEventListener('loading-changed', listener);
          }
        };
        grid.addEventListener('loading-changed', listener);
      }
    }

    window.customElements.define(UsersView.is, UsersView);
  </script>
</dom-module>
